<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Advices | a11y.css</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
          content="This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.">
    <link rel="stylesheet" href="./static/docs.css?v=1690620346319">
    <link rel="shortcut icon" href="https://ffoodd.github.io/a11y.css/static/favicon.ico">
    <link rel="preload" href="./static/fonts/firasans-book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="./static/css/a11y-en_advices-only.css"><link rel="stylesheet" href="./static/css/a11y-light.min.css">
</head>
  <body>
    <div class="sr-only-focusable" id="skip-links">
      <a href="#toc">Skip to table of content</a>
      <a href="#content">Skip to content</a>
    </div>
    <header role="banner" id="top" tabindex="-1">
  <a href="." id="logo">
    <svg xmlns="http://www.w3.org/2000/svg" width="90" height="89.905" viewBox="0 0 180 179.81" role="img" aria-labelledby="titre">
      <title id="titre">a11y.css</title>
      <path fill="#ffce00" d="M0 8a8 8 0 0 1 8-8h164a8 8 0 0 1 8 8v163.81a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8z"/>
      <path fill="currentColor" d="M80.83 36.9a10 10 0 0 1 5.06-7.18 7.43 7.43 0 0 1 8.53 1.53 8.76 8.76 0 0 1 2.91 6.18c0 4.71.09 64.9 0 68.32a10.42 10.42 0 0 1-1.77 5.83 8 8 0 0 1-8 3.23c-4-.86-6.63-4.74-6.75-8.71s-.01-69.07.02-69.2zM27 120.87c6-4.4 11.77-9.09 17.83-13.4-4-3.22-7.94-6.52-12.17-9.39-3.62-2.46-8.14-5.36-7-10.42a5.86 5.86 0 0 1 3.8-4.43 7.07 7.07 0 0 1 6.19 1.41c2.23 1.7 22.88 17.71 24.22 19.61a5.75 5.75 0 0 1 .63 5.93 13.16 13.16 0 0 1-5 4.79c-4.37 2.7-17.18 12.84-19.54 14.66a8.32 8.32 0 0 1-6.87 1.74 5.47 5.47 0 0 1-4-5 7.62 7.62 0 0 1 .57-3.52 5.84 5.84 0 0 1 1.34-1.98zm126.43.81c2.18 3.27 1.27 7.87-2.57 9.37-4.27 1.67-8-2.09-11.07-4.4-3.81-2.83-7.55-5.73-11.35-8.57-1.72-1.29-3.48-2.48-5.25-3.71a12.08 12.08 0 0 1-4.18-4.35 5.81 5.81 0 0 1 .42-5.41c1-1.69 23.77-19.87 25.64-20.75a6.78 6.78 0 0 1 5.5-.45 6 6 0 0 1 3.43 4.08c1.29 5.07-3.31 8.09-6.93 10.53-2.08 1.41-10.21 7.81-12.27 9.48 3.42 2.33 16.62 12.48 17.46 13.11a10 10 0 0 0 1.21 1.06zM100 141.25a11 11 0 1 1-11-11 11 11 0 0 1 11 11z"/>
    </svg>
  </a><nav role="navigation" aria-label="Main navigation" class="nav">
  <ul class="list-unstyled">
      <li>
        <a href="./errors.html" class="errors">Errors
        </a>
      </li>
      <li>
        <a href="./warnings.html" class="warnings">Warnings
        </a>
      </li>
      <li>
        <a href="./obsoletes.html" class="obsolete">Obsoletes
        </a>
      </li>
      <li>
        <a href="./advices.html" class="advices" aria-current="page">Advices
        </a>
      </li>
      <li>
        <a href="./webextension.html" class="webextension">WebExtension
        </a>
      </li>
      <li>
        <a href="./docs.html" class="sassdoc"><b><abbr title="Application Programming Interface">API</abbr></b> Doc
        </a>
      </li>
      <li>
        <a href="https://github.com/ffoodd/a11y.css">On <b>Github</b><span class="sr-only">&nbsp;(external link)</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>
        </a>
      </li>
  </ul>
</nav>
</header>


    <aside role="complementary">
      
<nav role="navigation" aria-labelledby="toc-title" id="toc">
  <p class="box-title" id="toc-title">Table of content</p>
  
    <ol>
        <li>
          <a href="#empty-option-on-select">&lt;select required&gt; should start with an empty &lt;option&gt;&#39;s [value]</a>
        </li>
        <li>
          <a href="#empty-class">Empty [class] attribute</a>
        </li>
        <li>
          <a href="#empty-id">Empty [id] attribute</a>
        </li>
        <li>
          <a href="#main">A second visible main tag</a>
        </li>
        <li>
          <a href="#figcaption">A second figcaption tag</a>
        </li>
        <li>
          <a href="#figcaption-order">figcaption order</a>
        </li>
        <li>
          <a href="#mailto">An email link should be valid</a>
        </li>
        <li>
          <a href="#tel">A phone link should call a real number</a>
        </li>
        <li>
          <a href="#role-button">button [role] on a link</a>
        </li>
        <li>
          <a href="#target-blank">Link opening new tab</a>
        </li>
        <li>
          <a href="#file-format">Linking to a file</a>
        </li>
        <li>
          <a href="#duplicate-roles">Duplicated roles</a>
        </li>
        <li>
          <a href="#missing-role">May have a search [role]?</a>
        </li>
        <li>
          <a href="#required">Does this look like [required]?</a>
        </li>
        <li>
          <a href="#hidden">Not :empty [hidden] things</a>
        </li>
        <li>
          <a href="#placeholder">Placeholder can&#39;t replace a label</a>
        </li>
        <li>
          <a href="#video-audio">video or audio things</a>
        </li>
        <li>
          <a href="#title">[title] should be equal to alternative</a>
        </li>
        <li>
          <a href="#time">Date and time should be understandable</a>
        </li>
        <li>
          <a href="#th-scope">[scope] should be either col or row</a>
        </li>
        <li>
          <a href="#table-presentation">Layout table in use</a>
        </li>
        <li>
          <a href="#no-href">No [href]</a>
        </li>
        <li>
          <a href="#no-https">Non HTTPS URL</a>
        </li>
    </ol>
</nav>


      <div class="box hidden-sm">
        <p class="box-title">Web extensions</p>
        <ul class="list-unstyled">
          <li>
            <a href="https://addons.mozilla.org/en-GB/firefox/addon/a11ycss/" title="a11y.css Firefox add-on">
              <img src="./static/firefox.svg" width="112" height="42" alt="a11y.css Firefox add-on"/>
            </a>
          </li>
          <li>
            <a href="https://microsoftedge.microsoft.com/addons/detail/a11ycss/lkehmahcnhddkdaemngepjckgcjnidpe" title="a11y.css Edge add-on">
              <img src="./static/edge.svg" width="112" height="42" alt="a11y.css Edge add-on"/>
            </a>
          </li>
          <li>
            <a href="https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=fr" title="a11y.css Chrome extension">
              <img src="./static/chrome.svg" width="119" height="42" alt="a11y.css Chrome extension"/>
            </a>
          </li>
        </ul>
      </div>
    </aside>

    <main role="main" id="content" tabindex="-1">
      
  <h1>Advices</h1>
  
        <article>
          <h2 id="empty-option-on-select">&lt;select required&gt; should start with an empty &lt;option&gt;&#39;s [value]</h2>
          <h2>Description</h2>
<p>A <code>&lt;select required&gt;</code> element, which isn't <code>[multiple]</code> and whose <code>[size]</code> isn't greater than <code>1</code>, should start with an empty <code>&lt;option&gt;</code>. That being said, you may use a placeholder content for this option but must ensure to use an empty <code>[value]</code> attribute; or set a <code>[size]</code> attribute to the <code>&lt;select&gt;</code>, which value should equal to the number of <code>&lt;option&gt;</code>s.</p>
<h2>References</h2>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/form-elements.html#placeholder-label-option">https://html.spec.whatwg.org/multipage/form-elements.html#placeholder-label-option</a></li>
<li><a href="https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fjsbin.com%2Ftozopid%2Fquiet">https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fjsbin.com%2Ftozopid%2Fquiet</a></li>
</ul>
<h2>Selector</h2>
<div class="pre"><pre><code class="css language-css" data-language="CSS">select[required]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[multiple]<span class="token punctuation">)</span>[size=<span class="token string">"1"</span>]<span class="token punctuation">,</span>
select[required]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[multiple]<span class="token punctuation">,</span> [size]<span class="token punctuation">)</span>
</code></pre></div>
<h2>Test</h2>
<div class="pre"><div><select name="slices" required>
  <option value="1">Cheese</option>
  <option value="2">Salami</option>
</select><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slices<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cheese<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Salami<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="empty-class">Empty [class] attribute</h2>
          <h3>Description</h3>
<p><code>[class]</code> shouldn't be present if empty. Something to improve, right?</p>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[class=<span class="token string">""</span>]<span class="token punctuation">,</span>
[class=<span class="token string">" "</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><b class="">Why is there a class here?</b>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Why is there a class here?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="empty-id">Empty [id] attribute</h2>
          <h3>Description</h3>
<p><code>[id]</code> shouldn't be present if empty. You'll thank me later.</p>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[id=<span class="token string">""</span>]<span class="token punctuation">,</span>
[id=<span class="token string">" "</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><i id="">Wait. Why is my ID empty?</i>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wait. Why is my ID empty?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="main">A second visible main tag</h2>
          <h3>Description</h3>
<p>A single <code>&lt;main&gt;</code> should be visible at a time. Isn't that obvious?</p>
<h3>References</h3>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#elementdef-main">https://html.spec.whatwg.org/multipage/grouping-content.html#elementdef-main</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">main ~ <span class="token property">main</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[hidden]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><main>I'm the main content!</main>
<main>No, It's me!</main>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>main</span><span class="token punctuation">></span></span>I'm the main content!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>main</span><span class="token punctuation">></span></span>No, It's me!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>main</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="figcaption">A second figcaption tag</h2>
          <h3>Description</h3>
<p><code>&lt;figcaption&gt;</code> should be single inside its parent. Check the spec!</p>
<h3>References</h3>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">figcaption</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token punctuation">:</span>first-of-type<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><figure role="group">
  <figcaption>I'm the caption.</figcaption>
  <img src="/static/ffoodd.png" alt="Needed" width="144" height="144" />
  <figcaption>I'm the caption too.</figcaption>
</figure>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figure</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figcaption</span><span class="token punctuation">></span></span>I'm the caption.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figcaption</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/ffoodd.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Needed<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figcaption</span><span class="token punctuation">></span></span>I'm the caption too.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figcaption</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figure</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="figcaption-order">figcaption order</h2>
          <h3>Description</h3>
<p><code>&lt;figcaption&gt;</code> should be first or last child. Nothing else.</p>
<h3>References</h3>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">figcaption</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token punctuation">:</span>first-child<span class="token punctuation">,</span> <span class="token punctuation">:</span>last-child<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><figure role="group">
  <img src="/static/ffoodd.png" alt="Needed" width="144" height="144" />
  <figcaption>I'm the caption.</figcaption>
  <p>I'm something else. Oh, wait.</p>
</figure>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figure</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/ffoodd.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Needed<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>figcaption</span><span class="token punctuation">></span></span>I'm the caption.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figcaption</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>I'm something else. Oh, wait.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>figure</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="mailto">An email link should be valid</h2>
          <h3>Description</h3>
<p>A <code>&lt;href="mailto:"&gt;</code> should contain a valid email.
Otherwise you may annoy your users.</p>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[href^=<span class="token string">"mailto"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href="mailto:myself">Surpri-ise!</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:myself<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Surpri-ise!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="tel">A phone link should call a real number</h2>
          <h3>Description</h3>
<p>A <code>&lt;href="tel:"&gt;</code> should contain a valid phone number.
Otherwise you may make your users to call anubody.</p>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[href^=<span class="token string">"tel"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href="tel:012345678">Who will I call?</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel:012345678<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Who will I call?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="role-button">button [role] on a link</h2>
          <h3>Description</h3>
<p>Obviously, a button role on a link is probably not so hard to move to an authentic button tag, isn't it?</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L174">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L174</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">a[role=<span class="token string">"button"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href="/" role="button">Submit</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="target-blank">Link opening new tab</h2>
          <h3>Description</h3>
<p>A link opening new tab or window should warn user about its behaviour.
You could use a <code>[title]</code>, for example.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#13.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#13.2</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#link-purpose-in-context">https://www.w3.org/TR/WCAG21/#link-purpose-in-context</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#change-on-request">https://www.w3.org/TR/WCAG21/#change-on-request</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H33">https://www.w3.org/WAI/WCAG21/Techniques/html/H33</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H83">https://www.w3.org/WAI/WCAG21/Techniques/html/H83</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F22">https://www.w3.org/WAI/WCAG21/Techniques/failures/F22</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[target$=<span class="token string">"blank"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href="/" target="_blank" rel="noopener noreferrer">New tab</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>noopener noreferrer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>New tab<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="file-format">Linking to a file</h2>
          <h3>Description</h3>
<p>A link to a file should indicate the file format, the file size and if different from the main document, the file language.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#13.3">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#13.3</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#link-purpose-in-context">https://www.w3.org/TR/WCAG21/#link-purpose-in-context</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H33">https://www.w3.org/WAI/WCAG21/Techniques/html/H33</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[download]<span class="token punctuation">,</span>
[href$=<span class="token string">".pdf"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".doc"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".png"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".jpg"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".gif"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".mp3"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".mp4"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".mov"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".ogg"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".xls"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".txt"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".zip"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".rar"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".docx"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".webp"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".apng"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".svg"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span><span class="token punctuation">,</span>
[href$=<span class="token string">".svgz"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>link<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href="/static/ffoodd.png">Wanna file?</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/ffoodd.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wanna file?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="duplicate-roles">Duplicated roles</h2>
          <h3>Description</h3>
<p>Some ARIA roles should be unique: at least <code>[main]</code>, <code>[search]</code>, <code>[banner]</code>, <code>[contentinfo]</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.6">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.6</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#bypass-blocks">https://www.w3.org/TR/WCAG21/#bypass-blocks</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[role=<span class="token string">"main"</span>] ~ [role=<span class="token string">"main"</span>]<span class="token punctuation">,</span>
[role=<span class="token string">"search"</span>] ~ [role=<span class="token string">"search"</span>]<span class="token punctuation">,</span>
[role=<span class="token string">"banner"</span>] ~ [role=<span class="token string">"banner"</span>]<span class="token punctuation">,</span>
[role=<span class="token string">"contentinfo"</span>] ~ [role=<span class="token string">"contentinfo"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><main role="main"><br /></main>
<div role="main"><br /></div>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>main</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="missing-role">May have a search [role]?</h2>
          <h3>Description</h3>
<p>A <code>[class]</code> or <code>[id]</code> containing search may carry the search ARIA <code>[role]</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.6">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.6</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#bypass-blocks">https://www.w3.org/TR/WCAG21/#bypass-blocks</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[id*=<span class="token string">"search"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"search"</span>]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[class*=<span class="token string">"search"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[role=<span class="token string">"search"</span>]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><form class="search" action="">
  <label for="field">Search</label>
  <input type="search" id="field" /><span>†</span>
</form>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>field<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>field<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="required">Does this look like [required]?</h2>
          <h3>Description</h3>
<p>A <code>[required]</code> or <code>[aria-required]</code> should be visually understandable.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.10">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.10</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#labels-or-instructions">https://www.w3.org/TR/WCAG21/#labels-or-instructions</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[required]<span class="token punctuation">,</span>
[aria-required]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><form action="">
  <label for="field">Fied</label>
  <textarea id="field" required></textarea><span>†</span>
</form>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>field<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fied<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>field<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="hidden">Not :empty [hidden] things</h2>
          <h3>Description</h3>
<p>A <code>[hidden]</code> or <code>[aria-hidden]</code> may not be a good idea if hiding content.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.8">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.8</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">https://www.w3.org/TR/WCAG21/#name-role-value</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[hidden]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token punctuation">:</span>empty<span class="token punctuation">)</span><span class="token punctuation">,</span>
[aria-hidden=<span class="token string">"true"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token punctuation">:</span>empty<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href="/" aria-hidden="true">Important thing!</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Important thing!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="placeholder">Placeholder can&#39;t replace a label</h2>
          <h3>Description</h3>
<p>A <code>[placeholder]</code> is not a label, is it?</p>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[placeholder]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[title]<span class="token punctuation">,</span> [aria-label]<span class="token punctuation">,</span> [aria-labelledby]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><input type="text" placeholder="Look Ma, no label!" id="test"><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Look Ma, no label!<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>test<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="video-audio">video or audio things</h2>
          <h3>Description</h3>
<p>A <code>&lt;video&gt;</code> or <code>&lt;audio&gt;</code> needs a few things to be accessible, like a transcript, subtitles, controls. This kind of things.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#4.1">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#4.1</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#audio-only-and-video-only-prerecorded">https://www.w3.org/TR/WCAG21/#audio-only-and-video-only-prerecorded</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#audio-description-or-media-alternative-prerecorded">https://www.w3.org/TR/WCAG21/#audio-description-or-media-alternative-prerecorded</a></li>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#4.13">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#4.13</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#media-alternative-prerecorded">https://www.w3.org/TR/WCAG21/#media-alternative-prerecorded</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">video<span class="token punctuation">,</span>
audio
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><video src="/" controls></video><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>video</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="title">[title] should be equal to alternative</h2>
          <h3>Description</h3>
<p>A <code>[title]</code> on any graphic content should be equal to <code>[aria-label]</code> or <code>[alt]</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.3">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.3</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#non-text-content">https://www.w3.org/TR/WCAG21/#non-text-content</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">https://www.w3.org/WAI/tutorials/images/decision-tree/</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/images.html#alt">https://html.spec.whatwg.org/multipage/images.html#alt</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">img[alt][title]<span class="token punctuation">,</span>
area[alt][title]<span class="token punctuation">,</span>
svg[aria-label][title]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><img src="/static/ffoodd.png" alt="I'm an alternative text!" title="I'm a title!" height="144" width="144"><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/ffoodd.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>I'm an alternative text!<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>I'm a title!<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="time">Date and time should be understandable</h2>
          <h3>Description</h3>
<p>A <code>&lt;time&gt;</code> or <code>[datetime]</code> content should be an understandable and well formated date.</p>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">time<span class="token punctuation">,</span>
[datetime]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><time>Yesterday</time>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span><span class="token punctuation">></span></span>Yesterday<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="th-scope">[scope] should be either col or row</h2>
          <h3>Description</h3>
<p>A <code>[scope]</code> can be col or row (and nothing else) and it has to be relevant.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.7">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.7</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships">https://www.w3.org/TR/WCAG21/#info-and-relationships</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H63">https://www.w3.org/WAI/WCAG21/Techniques/html/H63</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">th[scope]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><table>
  <caption>I'm a caption</caption>
  <thead>
    <tr>
      <th scope="col">First column</th>
      <td>Second column</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First cell</td>
      <td>Second cell</td>
    </tr>
    <tr>
      <td>First cell</td>
      <td>Second cell</td>
    </tr>
  </tbody>
</table>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>caption</span><span class="token punctuation">></span></span>I'm a caption<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>caption</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>First column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>Second column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>First cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>Second cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>First cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>Second cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="table-presentation">Layout table in use</h2>
          <h3>Description</h3>
<p>A <code>[role="presentation"]</code> is a good idea for any <code>&lt;table&gt;</code> used for layout, but a bad thing for a data table. Double check this!</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.3">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.3</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#meaningful-sequence">https://www.w3.org/TR/WCAG21/#meaningful-sequence</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">table[role=<span class="token string">"presentation"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><table role="presentation">
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>presentation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>First cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>Second cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>First cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>Second cell<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-href">No [href]</h2>
          <h3>Description</h3>
<p>Yet it's valid to skip the <code>[href]</code> attribute on a link, it's probably better to double check, isn't it?</p>
<h3>References</h3>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/links.html#links-created-by-a-and-area-elements">https://html.spec.whatwg.org/multipage/links.html#links-created-by-a-and-area-elements</a></li>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L161">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L161</a></li>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">a</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[href]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a>Who am I? Where do I link?</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span><span class="token punctuation">></span></span>Who am I? Where do I link?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-https">Non HTTPS URL</h2>
          <h3>Description</h3>
<p>When possible, try to use HTTPS.</p>
<h3>References</h3>
<ul>
<li><a href="https://transparencyreport.google.com/https/overview?hl=en">https://transparencyreport.google.com/https/overview?hl=en</a></li>
<li><a href="https://letsencrypt.org/">https://letsencrypt.org/</a></li>
<li><a href="https://checklists.opquast.com/fr/assurance-qualite-web/les-echanges-de-donnees-sensibles-sont-securises-et-signales-comme-tels">https://checklists.opquast.com/fr/assurance-qualite-web/les-echanges-de-donnees-sensibles-sont-securises-et-signales-comme-tels</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[src^=<span class="token string">"http:"</span>]<span class="token punctuation">,</span>
[href^=<span class="token string">"http:"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href="http://www.ffoodd.fr/">My target's protocol isn't secured</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.ffoodd.fr/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>My target's protocol isn't secured<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>

      
    </main>
    <footer role="contentinfo">
  <p class="builtWith box">
      Built with
      <a href="https://www.11ty.dev/">
        Eleventy
        <span class="sr-only">&nbsp;(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>-
      </a>
      and supported by
      <a href="https://www.jetbrains.com/?from=a11y.css">
        JetBrains
        <span class="sr-only">&nbsp;(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>
      </a>
    </p>
    <div>
      <p>® 2014 —&nbsp;2023 <strong>Gaël Poupard</strong></p>
      <p>This project is distributed under license <a href="https://opensource.org/license/mit/">MIT</a> and <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. <a href="#skip-links">Back to top</a></p>
    </div>
</footer>

    <script src="./static/docs.js?v=1690620346336"></script>
  </body>
</html>
